<!--
// 
// DateTimePreview.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/06.
// 
-->
<template>
    <div class="DateTimePreview">
        <el-icon v-if="!hideIcon" style="margin-right: 4px" :style="{color: iconColor}"><Clock /></el-icon>
        <span>{{dateFormat(value)}}</span>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    value: {type: String, default: () => ""},
    format: {type: String, default: () => "YYYY-MM-DD HH:mm:ss"},
    hideIcon: {type: Boolean, default: false},
    color: {type: String, default: () => "#333"},
    iconColor: {type: String, default: () => "#409EFF"},
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

function dateFormat() {
    if (props.value) {
        return $dayjs(props.value).format(props.format)
    }
    return ""
}


onMounted(() => {
})
</script>

<style scoped lang="scss">
.DateTimePreview {
    display: inline-flex;
    padding: 0 4px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
</style>